<template>
		<div>
			<div class="address">
				<div>
					<p>您当前所在位置</p>
					<router-link to="/" class="link">订单详细</router-link>
				</div>
			</div>
			<div class="roder-details">
					<div class="info">
						<h3 class="title">订单信息</h3>
						<div class="list">
							<div class="list-div">
								<div>
									<p>订单编号</p>
									<span>33643QXA0034</span>
								</div>
								<div>
									<p>订单金额</p>
									<span>3600元</span>
								</div>
								<div>
									<p>创建时间</p>
									<span>2020-06-01 10:36</span>
								</div>
			
								<div>
									<p>订单金额</p>
									<span>3600元</span>
								</div>
								<div>
									<p>订单状态</p>
									<span>待提交</span>
								</div>
							</div>
			
						</div>
						<h3 class="title">基本信息</h3>
						<div class="list">
							<div class="list-div">
								<div>
									<p>客户编号</p>
									<span>1123246</span>
								</div>
								<div>
									<p>面料来源</p>
									<span>厂家面料</span>
								</div>
								<div>
									<p>快递方式</p>
									<span>顺丰（慢）6</span>
								</div>
			
								<div>
									<p>客户性别</p>
									<span>男性</span>
								</div>
								<div>
									<p>面料来源</p>
									<span>正常业务</span>
								</div>
								<div>
									<p>地址</p>
									<span>宁波市鄞州区光华路三方大厦</span>
								</div>
								<div>
									<p>客户姓名</p>
									<span>李朝阳</span>
								</div>
								<div>
									<p>包装方式</p>
									<span>扁平箱</span>
								</div>
							</div>
			
						</div>
			
			
						<h3 class="title">品类版型</h3>
						<div class="list">
							<div class="list-div">
								<div>
									<p>客户性别</p>
									<span>男性</span>
								</div>
								<div>
									<p>服装版型</p>
									<span>BBYHA01</span>
								</div>
								<div>
			
								</div>
			
								<div>
									<p>服装品类</p>
									<span>衣裤套</span>
								</div>
								<div>
									<p>工艺类型</p>
									<span>全毛衬</span>
								</div>
							</div>
			
						</div>
			
			
						<h3 class="title">面料辅料</h3>
						<div class="list">
							<div class="list-div">
								<div>
									<p>
										面料</p>
									<span>LV001-013</span>
								</div>
								<div>
									<p>领底呢</p>
									<span>LV234-48</span>
								</div>
								<div>
			
								</div>
			
								<div>
									<p>西服里布</p>
									<span>LV005-158</span>
								</div>
								<div>
									<p>纽扣</p>
									<span>PI264</span>
								</div>
							</div>
			
						</div>
			
			
						<h3 class="title">款式工艺</h3>
						<div class="list">
							<div class="list-div">
								<div>
									<p>
										品类</p>
									<span>上衣</span>
								</div>
								<div>
									<p>外大袋</p>
									<span>平袋无袋盖</span>
								</div>
								<div>
									<p>驳头眼</p>
									<span>圆开口</span>
								</div>
			
								<div>
									<p>领口款式</p>
									<span>平戗驳</span>
								</div>
								<div>
									<p>背叉</p>
									<span>中叉</span>
								</div>
								<div>
									<p>外珠边</p>
									<span>无珠边</span>
								</div>
								<div>
									<p>驳宽</p>
									<span>-5.5cm</span>
								</div>
								<div>
									<p>袖口款式</p>
									<span>真叉叠订</span>
								</div>
								<div>
									<p>里布款式</p>
									<span>全里</span>
								</div>
								<div>
									<p>门襟扣</p>
									<span>单排一粒扣</span>
								</div>
								<div>
									<p>手巾袋</p>
									<span>常规</span>
								</div>
								<div>
									<p>褂面</p>
									<span>直褂面</span>
								</div>
							</div>
						</div>
			
						<div class="list">
			
			
							<div class="list-div">
								<div>
									<p>
										品类</p>
									<span>裤子</span>
								</div>
								<div>
									<p>脚绸</p>
									<span>无</span>
								</div>
								<div>
									<p>脚口</p>
									<span>
										常规</span>
								</div>
			
								<div>
									<p>前褶</p>
									<span>无褶</span>
								</div>
								<div>
									<p>马王袋</p>
									<span>有</span>
								</div>
								<div>
									<p>腰里</p>
									<span>常规</span>
								</div>
								<div>
									<p>后袋</p>
									<span>双嵌</span>
								</div>
								<div>
									<p>前袋</p>
									<span>直袋</span>
								</div>
								<div>
			
								</div>
								<div>
									<p>调节袢</p>
									<span>有</span>
								</div>
								<div>
									<p>裤腰头</p>
									<span>圆头</span>
								</div>
			
							</div>
			
						</div>
			
			
			
						<h3 class="title">绣字撞色</h3>
						<h4 class="title2">绣字</h4>
						<div class="list">
							<div class="list-div">
								<div>
									<p>
										品类</p>
									<span>上衣</span>
								</div>
								<div>
									<p>绣字内容</p>
									<span class="b">inspiration</span>
								</div>
								<div>
									<p>绣字颜色</p>
									<span>YKO0034</span>
								</div>
			
								<div>
									<p>绣字部位</p>
									<span>左内袋上端</span>
								</div>
								<div>
									<p>绣字字体</p>
									<span>YJS034</span>
								</div>
								<div>
									
								</div>
								
							</div>
						</div>
			
						<div class="list">
			
			
							<div class="list-div">
								<div>
									<p>
										品类</p>
									<span>裤子</span>
								</div>
								<div>
									<p>绣字内容</p>
									<span class="b">inspiration</span>
								</div>
								<div>
									<p>绣字颜色</p>
									<span>YKO0034</span>
								</div>
								
								<div>
									<p>绣字部位</p>
									<span>右内袋</span>
								</div>
								<div>
									<p>绣字字体</p>
									<span>YJS034</span>
								</div>
								<div>
									
								</div>
			
							</div>
			
						</div>
						
						<h4 class="title2">撞色</h4>
						<div class="list">
							<div class="list-div">
								<div>
									<p>
										驳头眼</p>
									<span>XZ006</span>
								</div>
								<div>
									<p>内珠边</p>
									<span class="">无</span>
								</div>
								<div>
									<p>外珠边</p>
									<span>LV006</span>
								</div>
						
								<div>
									<p>内滚条</p>
									<span>LV003-5</span>
								</div>
								<div>
									<p>袖口眼</p>
									<span>XA2234</span>
								</div>
								<div>
									<p>内包边</p>
									<span>LV015-07</span>
								</div>
								<div>
									<p>肘贴</p>
									<span>J0005</span>
								</div>
							</div>
						</div>
					
						<h3 class="title">量体信息</h3>
						<h4 class="title2">客户信息</h4>
						<div class="list">
							<div class="list-div">
								<div>
									<p>
										尺寸类型</p>
									<span>舒适</span>
								</div>
								<div>
									<p>体重</p>
									<span>95kg</span>
								</div>
								<div>
									<p>身高</p>
									<span>170cm</span>
								</div>
						
								<div>
									<p>年龄</p>
									<span>29岁</span>
								</div>
							</div>
						</div>
						
						<h4 class="title2">成衣尺寸</h4>
						<div class="list">
							<div class="list-div">
								<div>
									<p>
										品类</p>
									<span>上衣</span>
								</div>
								<div>
									
								</div>
								<div>
									
								</div>
						
								<div>
									<p>前长</p>
									<span>79cm</span>
								</div>
								<div>
									<p>后长</p>
									<span>79cm</span>
								</div>
								<div>
									<p>左袖长</p>
									<span>79cm</span>
								</div>
								<div>
									<p>胸围</p>
									<span>79cm</span>
								</div>
								<div>
									<p>腰围</p>
									<span>79cm</span>
								</div>
								<div>
									<p>袖肥</p>
									<span>79cm</span>
								</div>
								<div>
									<p>下摆</p>
									<span>79cm</span>
								</div>
								<div>
									<p>肩宽</p>
									<span>79cm</span>
								</div>
								<div>
									<p>背宽</p>
									<span>79cm</span>
								</div>
								<div>
									<p>右袖长</p>
									<span>79cm</span>
								</div>
								<div>
									<p>袖口</p>
									<span>79cm</span>
								</div>
								<div>
									<p>胸宽</p>
									<span>79cm</span>
								</div>
							</div>
						</div>
						
						<div class="list">
							<div class="list-div">
								<div>
									<p>
										品类</p>
									<span>裤子</span>
								</div>
								<div>
									
								</div>
								<div>
									
								</div>
						
								<div>
									<p>左外长</p>
									<span>79cm</span>
								</div>
								<div>
									<p>右外长</p>
									<span>79cm</span>
								</div>
								<div>
									<p>中档</p>
									<span>79cm</span>
								</div>
								<div>
									<p>内长</p>
									<span>79cm</span>
								</div>
								<div>
									<p>腰围</p>
									<span>79cm</span>
								</div>
								<div>
									<p>全浪</p>
									<span>79cm</span>
								</div>
								<div>
									<p>臀围</p>
									<span>79cm</span>
								</div>
								<div>
									<p>横档</p>
									<span>79cm</span>
								</div>
								<div>
									<p>脚口</p>
									<span>79cm</span>
								</div>
								
							</div>
						</div>
						
						<h4 class="title2">体型数据</h4>
						<div class="list">
							<div class="list-div">
								<div>
									<p>
										胸部</p>
									<span>标准</span>
								</div>
								<div>
									<p>
										臀部</p>
									<span>标准</span>
								</div>
								<div>
									<p>
										站姿</p>
									<span>标准</span>
								</div>
						
								<div>
									<p>
										背部</p>
									<span>标准</span>
								</div>
								<div>
									<p>
										肩部</p>
									<span>溜肩</span>
								</div>
								<div>
									<p>
										腹部</p>
									<span>凸肚</span>
								</div>
								
							</div>
						</div>
						
						
						<h3 class="title">订单附加条件</h3>
						<div class="tabs">
							<div class="tab">
								<h5>式样</h5>
								<div class="tab-content" >
									<p v-for="item in tab1Data" :key="item.id" @click="selectTab('tab1Idx', item.id)" :class="{'active':tab1Idx == item.id}">{{item.name}}</p>
								</div>
							</div>
							<div class="tab">
								<h5>紧急指数</h5>
								<div class="tab-content">
									<p style="width:160px" v-for="item in tab2Data" :key="item.id" @click="selectTab('tab2Idx', item.id)" :class="{'active':tab2Idx == item.id}"><span>{{item.name}}</span><b>{{item.hoveName}}</b></p>
								</div>
							</div>
							<div class="tab">
								<h5>改款打样</h5>
								<div class="tab-content">
									<p v-for="item in tab3Data" :key="item.id" @click="selectTab('tab3Idx', item.id)" :class="{'active':tab3Idx == item.id}">{{item.name}}</p>
								</div>
							</div>
							<div class="tab">
								<h5>品牌标</h5>
								<div class="tab-content">
									<p v-for="item in tab4Data" :key="item.id" @click="selectTab('tab4Idx', item.id)" :class="{'active':tab4Idx == item.id}">{{item.name}}</p>
								</div>
							</div>
						</div>
						
						
						<h3 class="title">订单费用明细</h3>
						<h4 class="title2">面料费用</h4>
						<div class="table-css">
						
							<a-table class="table1" lign="center" :columns="columns1" :data-source="data1" :pagination="false">
								<a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a>
								<a slot="k6" slot-scope="text" style="color:#C49D18">{{text}}</a>
								<a slot="k8" slot-scope="text" style="color:#C49D18">{{text}}</a>
							</a-table>
						</div>
						<h4 class="title2">加工费用</h4>
						<div>
							<div class="table-css">
								<a-table class="table1" lign="center" :columns="columns2" :data-source="data1" :pagination="false">
									<a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a>
									<a slot="k6" slot-scope="text" style="color:#C49D18">{{text}}</a>
									<a slot="k8" slot-scope="text" style="color:#C49D18">{{text}}</a>
								</a-table>
							</div>
						</div>
						
						<h5 class="price">合计金额：<span>10640元</span></h5>
						
						<h3 class="title">订单备注</h3>
						<textarea  class="text1" style="color: rgb(153, 153, 153);"></textarea>
						
						<div class="btn">提交订单</div>
					</div>
				</div>
			
		</div>
</template>

<script>
	
	const columns1 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '面料',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '米数',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '标准单价',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '阶梯折扣',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '客户折扣',
			key: 'k6',
			dataIndex: 'k6',
			scopedSlots: {
				customRender: 'k6'
			},
		},
		{
			title: '折后单价',
			key: 'k7',
			dataIndex: 'k7',
			scopedSlots: {
				customRender: 'k7'
			},
		},
		{
			title: '总金额',
			key: 'k8',
			dataIndex: 'k8',
			scopedSlots: {
				customRender: 'k8'
			},
		},
	];
	const columns2 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '品类',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '性别',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '标准单价',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '阶梯折扣',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '客户折扣',
			key: 'k6',
			dataIndex: 'k6',
			scopedSlots: {
				customRender: 'k6'
			},
		},
		{
			title: '折后单价',
			key: 'k7',
			dataIndex: 'k7',
			scopedSlots: {
				customRender: 'k7'
			},
		},
		{
			title: '总金额',
			key: 'k8',
			dataIndex: 'k8',
			scopedSlots: {
				customRender: 'k8'
			},
		},
	];
	const data1 = [{
		k1: '1',
		k2: '23341964AQ',
		k3: '2020-06-01',
		k4: '2264AA',
		k5: '40米',
		k6: '80%',
		k7: '304元/米',
		k8: '7600元'
	}]
	// @ is an alias to /src
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	export default {
		name: 'MyAfterSales',
		data() {
			return {
				columns1,
				columns2,
				data1,
				locale,
				tab1Data: [
					{
						id: 1,
						name: '无需试穿'
					},
					{
						id: 2,
						name: '半成品试穿'
					},
					{
						id: 3,
						name: '毛坯半成品试穿'
					},
				],
				tab1Idx: -1,
				tab2Data: [
					{
						id: 1,
						name: '常规',
						hoveName: '7个工作日'
					},
					{
						id: 2, 
						name: '加急',
						hoveName: '5个工作日200元'
					},
					{
						id: 3,
						name: '特急',
						hoveName: '3个工作日400元'
					},
				],
				tab2Idx: -1,
				tab3Data: [
					{
						id: 1,
						name: '来款/样式'
					},
					{
						id: 2,
						name: '改款'
					},
				],
				tab3Idx: -1,
				tab4Data: [
					{
						id: 1,
						name: '派定制'
					},
				],
				tab4Idx: -1,
			}
		},
		methods: {
			selectTab: function (dataStr, i)  {
				this[dataStr] = i
			}
		}
	}
</script>

<style scoped lang="scss">
	.roder-details {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		margin-top: 20px;
		padding: 20px 35px;
		
		.info {
			.table-css {
				position: relative;
				.bz {
					    width: 447px;
					    height: 63px;
					    background: inherit;
					    background-color: rgba(255, 221, 202, 1);
						position: absolute;
						right: 0px;
						top: -63px;
						display: flex;
						align-items: center;
						justify-content: center;
						    align-items: center;
						    justify-content: center;
						    flex-wrap: wrap;
						    flex-direction: column;
						p {
							width: 100%;
							color: rgb(251, 8, 8);
							font-size: 13px;
							padding-left: 10px;
							margin-bottom: 0px;
							line-height: 16px;
						}
				}
			}
			.btn {
					
				    border-width: 0px;
				    width: 112px;
				    height: 40px;
				    background: inherit;
				    background-color: rgba(13, 221, 108, 1);
				    border: none;
				    border-radius: 3px;
				    -moz-box-shadow: none;
				    -webkit-box-shadow: none;
				    box-shadow: none;
				    font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
				    font-weight: 500;
				    font-style: normal;
				    font-size: 15px;
					text-align: center;
					display: block;
					color: #fff;
					line-height: 40px;
					margin-top: 25px;
					margin-bottom: 60px;
					cursor: pointer;
			}
			.price {
				color: rgb(38, 38, 38);
				font-size: 16px;
				span {
					color: rgb(215, 1, 1);
				}
				margin: 35px 0px;
			}
			.text1 {
				    width: 533px;
				    height: 105px;
				    padding: 3px 2px 3px 2px;
				    font-family: 'ArialMT', 'Arial';
				    font-weight: 400;
				    font-style: normal;
				    font-size: 13px;
				    text-decoration: none;
				    letter-spacing: normal;
				    color: #000000;
				    vertical-align: none;
				    text-align: left;
				    text-transform: none;
				    background-color: #f9f9f9;
				    border-color: transparent;
				    resize: none;
					outline: none;
					padding: 10px;
			}
			.tabs{
				.tab {
					margin-bottom: 10px;
					display: flex;
					h5 {
						width: 112px;
						padding: 2px 2px 2px 24px;
						background-color: rgba(249, 249, 249, 1);
						font-size: 15px;
						color: #333;
						display: flex;
						height: 36px;
						align-items: center;
						margin: 0px !important;
						margin-right:  6px !important;
					}
					.tab-content {
						height: 36px;
						display: flex;
						p {
							border: 1px solid rgb(242, 242, 242);
							min-width: 100px;
							height: 36px;
							height: 36px;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0 15px;
							color: #333;
							font-size: 15px;
							margin-right: 6px;
							
							cursor: pointer;
							b {
								display: none;
								font-weight: 700;
							}
							&.active {
								color: rgb(255, 236, 112);
								font-weight: 700;
								background-color: rgb(74, 74, 74);
							}
							&:hover {
								b {
									display: block;
								}
								span {
									display: none;
								}
							}
						}
					}
				}
			}

			h3.title {
				height: 30px;
				line-height: 30px;
				position: relative;
				font-size: 16px;
				color: #333;
				font-weight: 700;
				margin-bottom: 25px;

				&:after {
					position: absolute;
					height: 100%;
					width: 5px;
					position: absolute;
					left: -35px;
					top: 0px;
					background-color: rgba(74, 74, 74, 1);
					content: "";
				}
			}
			.title2 {
				width: 112px;
				padding: 2px 2px 2px 24px;
				font-size: 15px;
				color: #333;
				display: flex;
				height: 36px;
				align-items: center;
				margin: 0px !important;
				margin-bottom: 10px !important;
			}
			.list {
				margin-bottom: 20px;

				.list-div {
					display: flex;
					flex-wrap: wrap;

					div {
						width: 33.3%;
						display: flex;
						height: 36px;
						align-items: center;

						p {
							width: 112px;
							padding: 2px 2px 2px 24px;
							background-color: rgba(249, 249, 249, 1);
							font-size: 15px;
							color: #333;
							display: flex;
							height: 36px;
							align-items: center;
							margin: 0px !important;
						}

						span {
							width: calc(100% - 112px);
							padding: 2px 2px 2px 24px;
							font-size: 15px;
							color: #333;
							display: flex;
							height: 36px;
							align-items: center;
							
							&.b {
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}
</style>
